<!--
  Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
  TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
-->
<div layout="row" layout-align="end center" flex>
  <nav
    hide-xs
    hide-sm
    class="text-upper text-sm docs-nav push-left-lg push-right-xxl"
    layout="row"
  >
    <a
      class="push-right-md text-nodecoration"
      [routerLink]="['/docs']"
      [routerLinkActive]="['active']"
      >Docs</a
    >
    <a
      class="push-right-md text-nodecoration"
      [routerLink]="['/components']"
      [routerLinkActive]="['active']"
    >
      Components
    </a>
    <a
      class="push-right-md text-nodecoration"
      [routerLink]="['/echarts']"
      [routerLinkActive]="['active']"
      >ECharts</a
    >
    <a
      class="push-right-md text-nodecoration"
      [routerLink]="['/utilities']"
      [routerLinkActive]="['active']"
    >
      Utilities
    </a>
  </nav>
  <div layout="row" layout-align="end center">
    <button
      mat-button
      class="version-selector"
      [matMenuTriggerFor]="verMenu"
      [matTooltip]="'Click here to change versions'"
    >
      {{ version }}
      <mat-icon>arrow_drop_down</mat-icon>
    </button>
    <mat-menu #verMenu="matMenu">
      <ng-template let-version ngFor [ngForOf]="versions">
        <a
          mat-menu-item
          [href]="'https://teradata.github.io/covalent/' + version + '/'"
          >{{ version }}</a
        >
      </ng-template>
    </mat-menu>
    <a
      mat-icon-button
      matTooltip="Github"
      href="https://github.com/teradata/covalent"
      target="_blank"
    >
      <mat-icon svgIcon="assets:github"></mat-icon>
    </a>
    <button hide-xs mat-icon-button [matMenuTriggerFor]="settingsMenu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #settingsMenu="matMenu">
      <button
        mat-menu-item
        (click)="dir = dir == 'rtl' ? 'ltr' : 'rtl'; changeDir(dir)"
        title="Toggle between RTL and LTR"
      >
        <mat-icon>swap_horiz</mat-icon>
        <span>{{ dir.toUpperCase() }}</span>
      </button>
      <button
        mat-menu-item
        *ngIf="activeTheme === 'theme-dark'"
        (click)="theme('theme-light')"
      >
        <mat-icon>brightness_high</mat-icon>
        <span>Light mode</span>
      </button>
      <button
        mat-menu-item
        *ngIf="activeTheme !== 'theme-dark'"
        (click)="theme('theme-dark')"
      >
        <mat-icon>brightness_low</mat-icon>
        <span>Dark mode</span>
      </button>
    </mat-menu>
  </div>
</div>
